<template>
	<view class="page order">
		<view class="flex flexC fs12 cff mt12">
		
			<input class="px10 c00 flex1 bor ml12 r40 py5" type="number" placeholder="订单号后4位数" v-model="orderNo"
				placeholder-class="c00">
			<picker mode="date" @change="dateStartChange">
				<text class=" w100 px12 py7 bor r40  c00 ">{{startTime}}</text>
			</picker>
			<picker :range="roomNameList" @change="roomSelectChange">
				<text class=" w100 px12 py7 bor r40  c00 ">{{roomSelect}}</text>
			</picker>
		
			<view class="aliR flex1 fs14 mr10" @click="searchList">
				<text class="bged px12 py7 r40">查询</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="list" @scrolltolower="nextPage">
			<view v-for="item in list" @click="clickDetail(item)">
				<view class="bgff pt18 pb24 px15 mt12">
					<view class="flex flexC flexB">
						<view class="fs12">{{item.out_trade_no}}</view>
						<text class="cff5">{{item.order_status_text}}</text>
					</view>
					<view class="flex flexB mt12 pb12 borb" v-for="(good,index) in item.products">
						<view class="flex flexC flexS">
							<image :src="good.image" class="w72 flexSh" mode="widthFix"></image>
							<view class="ml7 w-11">
								<view class="ellipsis2 fs13">{{good.title}}</view>
								<view class="fs11 c63 mt6"></view>
							</view>
						</view>
						<view class="aliR">
							<view class="bold7">￥{{good.price}}</view>
							<view class="">x{{good.number}}</view>
						</view>
					</view>

				</view>
				<view class="bgff pr27 pb18">
					<view class="fs12 aliR c63">
						<view class="">
							<text class="fs13 ml17">总价</text>
							<text class="fs14 bold6 cff5">￥{{item.total_price}}</text>
						</view>
					</view>
					<!-- 	<view class="flex flexjE mt22 ml16" v-if="item.status == '待支付'">
					<view class="btn1">取消订单</view>
					<view class="btn2 ml8">付款</view>
				</view> -->
				</view>
			</view>

		</scroll-view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: ['全部', '待支付', '待发货', "待收货", '已完成'],
				page: 1,
				list: [{

				}],
				status: "",
				isLastPage: false,
				isnodata: false,
				shop_id:'',
				startTime:'时间选择',
				roomSelect:'全部房间',
				roomNameList:[],
				roomList:[],
				roomSelectId:'',
				orderNo:''
			};
		},
		onLoad(option) {
			this.shop_id = option.shop_id;
			this.getRoom();
		},
		onShow() {

			this.list = [];
			this.status = "";
			this.isLastPage = false;
			this.isnodata = false;
			this.page = 1;
			this.getList();
		
		},
		methods: {
			
			searchList() {
				if (this.startTime == '时间选择') {
			
					this.startTime = "";
				}
				this.list = [];
				this.page = 1;
				this.isLastPage = false;
				this.isnodata = false;
				this.getList();
			},
			
			roomSelectChange(e) {
				this.roomSelect = this.roomNameList[e.detail.value];
			
				this.roomSelectId = this.roomList[e.detail.value].id;
			},
			
			dateStartChange(e) {
				this.startTime = e.detail.value;
			},

			clickDetail(item) {

				uni.navigateTo({
					url: '/other/online/detail?order_no=' + item.out_trade_no
				})
			},
			
			
			getRoom() {
				let param = {
					shop_id: this.shop_id,
			
				};
				let that = this;
				this.$api.getRoomList(param).then(res => {
			
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomList = res.data;
						for (var i = 0; i < that.roomList.length; i++) {
							that.roomNameList.push(that.roomList[i].name);
						}
					} else {
			
					}
				})
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},
		
			onChangeTabs(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.status = "";
				} else if (index == 1) {
					this.status = "paying";
				} else if (index == 2) {
					this.status = "payed";
				} else if (index == 3) {
					this.status = "transit";
				} else if (index == 4) {
					this.status = "done";
				}
				this.page = 1;
				this.list = [];
				this.getList();
			},

			getList() {
				let param = {
					shop_id:this.shop_id,
					page: this.page,
					orderNo: this.orderNo,
					startTime: this.startTime,
					roomId: this.roomSelectId
				}
				let that = this;
				this.$api.onlineOrderList(param).then(res => {
					console.info(res);

					if (res.code == 1) {


						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							that.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.order {
		.tabs {
			.item {
				box-sizing: border-box;
				position: relative;

				&.active {
					&::after {
						content: '';
						width: 46upx;
						height: 4upx;
						background-color: #F5C51D;
						position: absolute;
						bottom: -20rpx;
						left: calc(50% - 23upx);
					}
				}
			}
		}

		.list {
			height: calc(100%);

			.bgef {
				background-color: #EFEFEF;
			}

			.logo {
				width: 132upx;
				height: 136upx;
			}

			.ellipsis1 {
				width: 400upx;
			}

			.w72 {
				width: 188upx;
				height: 188upx;
			}

			.borb {
				border-bottom: 2upx dashed #EEEEEE;
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;

			.btn {
				background-color: #FD449B;
				width: 200upx;
			}
		}

		.c63 {
			color: #636363;
		}

		.btn1 {
			border: 1rpx solid #707070;
			padding: 12rpx 26rpx;
			border-radius: 28rpx;
			font-size: 26rpx;
		}

		.btn2 {
			background-color: #FD449B;
			padding: 12rpx 54rpx;
			border-radius: 28rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>